import React, { PureComponent } from 'react'
import { connect } from 'dva';

import { Tabs } from 'antd';

import Transmission from '../device_transmission';
import OutdoorHydrant from '../device_outdoor_hydrant';
import Smoke from '../device_smart_smoke';
import Warn from '../device_warm_sensation';
import Gas from '../device_gas';
import Electricity from '../device_electricity';
import FireHost from '../device_fire_host';
import ThingsHost from '../device_things_host';
import FireHostSub from '../device_host_sub';
import ThingsHostSub from '../device_things_sub';
import IndoorHydrant from '../device_indoor_hydrant';
import FireMonitor from '../device_fire_monitor';
import Charge from '../device_charge';
import Camera from '../device_camera';
import Genaral from '../device_general';

import Upload from './Upload'

export interface IProps {
  dispatch?: ({ type }: { type: string, payload?: any }) => Promise<any>;
  children?: React.ReactNode,
  loading: boolean,
  buttons?: Array<any>,
  list: {
    data: Array<any>,
    dataCnt: number
  };
  subKey: string;
  show: boolean;
  temple?: {
    contentLink: string;
    name: string;
  };
  file?: any;
}

@connect(({ menu, devices, upload }) => ({
  buttons: menu.buttons,
  subKey: devices.subKey,
  temple: devices.temple,
  show: devices.show,
  file: upload.fileValue || {},
}))
class Devices extends PureComponent<IProps, any> {

  state = {
    key: sessionStorage.getItem('pageKey') || 'device_transmission',
    subKey: this.props.subKey || sessionStorage.getItem('pageKeySub'),
    fileList: [],
    confirmLoading: false,
    value: 1
  };


  componentDidMount() {
    const key = sessionStorage.getItem('pageKey') || 'device_transmission';
    const subKey = sessionStorage.getItem('pageKeySub');
    const { dispatch } = this.props;
    dispatch({ type: 'devices/setKey', payload: key })
    dispatch({ type: 'devices/setSubKey', payload: subKey })
  }

  

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.subKey !== prevState.subKey) {
      return { subKey: nextProps.subKey };
    }
    else return null;
  }
  
  changeTabs = (key) => {
    sessionStorage.setItem('pageKey', key)
    sessionStorage.removeItem('pageKeySub')
    const { dispatch } = this.props;
    dispatch({ type: 'devices/handleKey', payload: key }).then(() => {
      this.setState({ key, subKey: null })
    })
  }
  

  render() {
    const TabPane = Tabs.TabPane;
    const { key, subKey } = this.state;

    const DATA = [
      { key: 'device_transmission', Com: () => <Transmission />, name: '用户传输装置' },
      {
        key: 'device_fire_host', Com: () => (
          subKey && subKey.split('%%')[0] === 'host'
            ? <FireHostSub parentId={subKey.split('%%')[1]} />
            : <FireHost />),
        name: '消防主机'
      },
      { key: 'device_smart_smoke', Com: () => <Smoke />, name: '智能烟感' },
      { key: 'device_warm_sensation', Com: () => <Warn />, name: '智能温感' },
      { key: 'device_electricity', Com: () => <Electricity />, name: '智慧用电' },
      { key: 'device_ourdoor_hydrant', Com: () => <OutdoorHydrant />, name: '室外消火栓' },
      { key: 'device_indoor_hydrant', Com: () => <IndoorHydrant />, name: '室内用水' },
      { key: 'device_charge', Com: () => <Charge />, name: '智能充电桩' },
      { key: 'device_camera', Com: () => <Camera />, name: '监控摄像头' },
      { key: 'device_fire_monitor', Com: () => <FireMonitor />, name: '火焰识别摄像头' },
      {
        key: 'device_things_host', Com: () => (
          subKey && subKey.split('%%')[0] === 'things'
          ? <ThingsHostSub parentId={subKey.split('%%')[1]} />
          : <ThingsHost />),
          name: '物联网主机'
        },
        { key: 'device_general', Com: () => <Genaral />, name: '水浸设备' },
        { key: 'device_gas', Com: () => <Gas />, name: '可燃气体探测器' },
    ]

    return (
      <>
        <Tabs defaultActiveKey={key} onChange={this.changeTabs}>
          {
            DATA.map(v => (
              <TabPane tab={v.name} key={v.key}>
                {v.key === key && <v.Com />}
              </TabPane>
            ))
          }
        </Tabs>
        <Upload show={this.props.show} temple={this.props.temple}/>
      </>
    );
  }
}

export default Devices;
